<template>
  <div class="statistics-index">
    <div class="details flex" v-loading="detailLoading">
      <div class="item flex-1 lh1 fs14" v-for="(item, i) in detailLabel" :key="i">
        <div class="label">{{item.label}}</div>
        <div class="value">
          {{info[item.prop] | formatDetails(item.prop, tools.moneyNumber)}}
          <span class="fs14 vab" v-show="item.prop === 'total_price'">元</span>
        </div>
      </div>
    </div>
    <div class="income por">
      <!--订单收入趋势-->
      <e-charts v-loading="incomeLoading" :options="incomeOpt" height="400px"></e-charts>
      <div class="poa radio-btn">
        <el-radio-group @change="typeChange" v-model="incomeType" size="mini" class="radio-btn">
          <el-radio-button v-for="(type, i) in typeList" :label="type.value">{{type.label}}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="active-count">
      <!--用户设备激活量-->
      <e-charts v-loading="activeLoading" :options="activeCountOpt" height="400px"></e-charts>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "StatisticsIndex",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        detailLabel: [
          {label: '客户总数', prop: 'cus_sum'},
          {label: '产品数', prop: 'pdt_sum'},
          {label: '订单量', prop: 'order_num'},
          {label: '学生设备数', prop: 'mac_sum'},
          {label: '交易总金额', prop: 'total_price'},
        ],
        info: {},

        activeLoading: true,
        incomeLoading: true,
        detailLoading: false,

        activeCount: [],
        income: [],
        activeCountOpt: {},
        incomeOpt: {},
        incomeType: 3,
        typeList: [
          {label: '本月', value: 1},
          {label: '近半年', value: 2},
          {label: '近一年', value: 3},
        ],
      }
    },
    filters: {
      formatDetails(val, prop, format) {
        switch (prop) {
          case 'total_price':
            return format(val || 0, 2);
        }
        return format(val || 0);
      },
    },
    watch: {
      income(val) {
        let x = [];
        let series = Object.keys(val).map(k => {
          let data = [];
          Object.values(val[k]).map(v => {
            !x.includes(v.month) && x.push(v.month);
            data.push(v.total || 0);
          });
          return {
            name: k,
            type: 'bar',
            barMaxWidth: '20%',
            data
          };
        });
        this.incomeOpt = {
          title: {
            text: '订单收入趋势'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            icon: 'circle',
            selected: {},
            bottom: 5
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [{}],
          series,
        };
        setTimeout(() => {
          this.incomeLoading = false;
        }, 500);
      },
      activeCount(val) {
        let x = [];
        let series = ['学生设备', '家长用户'].map(e => {
          return {
            name: e,
            type: 'line',
            data: [],
          };
        });
        val.mac.map((e, i) => {
          x.push(e.month);
          series[0].data.push(e.count || 0);
          series[1].data.push(val.member[i].count || 0);
        });
        this.activeCountOpt = {
          title: {
            text: '用户设备激活量'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisPointer: {
                // type: 'shadow'
              }
            }
          ],
          yAxis: [{}],
          series,
        };
        setTimeout(() => {
          this.activeLoading = false;
        }, 500);
      },
    },
    created() {
      this.getInfo();
    },
    mounted() {
      this.typeChange();
    },
    methods: {
      typeChange() {
        this.getIncome();
        this.getActiveCount();
      },

      getInfo() {
        this.detailLoading = true;
        this.http.$post('admin/member.Api/data_statistics', {
          company_id: this.userInfo.company_id,
        }).then(res => {
          this.info = res;
          this.detailLoading = false;
        }).catch(e => {
          this.detailLoading = false;
          console.log(e);
        });
      },
      getIncome(val) {
        this.incomeLoading = true;
        this.http.$post('admin/order.api/company_income_rate', {
          company_id: this.userInfo.company_id,
          type: this.incomeType,
        }).then(res => {
          this.income = res;
        }).catch(e => {
          console.log(e);
          this.incomeLoading = false;
        });
      },
      async getActiveCount() {
        try {
          this.activeLoading = true;
          let mac = await this.http.$post('admin/member.Api/member_creat', {
            type: 'mac',
            company_id: this.userInfo.company_id,
            time_type: this.incomeType,
          });
          let member = await this.http.$post('admin/member.Api/member_creat', {
            type: 'member',
            company_id: this.userInfo.company_id,
            time_type: this.incomeType,
          });
          this.activeCount = {mac, member};
        } catch (e) {
          this.activeLoading = false;
          console.log(e);
        }
      },
    },
  }
</script>

<style scoped lang="less">
  .statistics-index {
    > :nth-child(n) {
      margin-bottom: 10px;
      padding: 20px 25px;
      background-color: #fff;
      border-radius: 4px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .details {
    font-size: 18px;
    .item {
      color: #999;
    }
    .value {
      color: #222;
      font-size: 24px;
      margin-top: 12px;
    }
  }

  .radio-btn {
    top: 26px;
    right: 156px;
    border-radius: 50%;
    /deep/ .el-radio-button {
      width: 80px;
    }
    /deep/ .el-radio-button__inner {
      width: 100%;
    }
  }
</style>